<template>
  <div>
    <h3>路由守卫的应用</h3>
    <pre>
1. 所有的路由组件,都会被补充基于 vue-router 路由守卫钩子函数
2. 所有的路由守卫方法,都必然存在三个参数 to from next
  + to:记录将要切换到的路由组件的信息
  + from:当前正在被显示的路由组件的信息
  + next:是一个回调函数,通过next函数的执行,描述路由守卫的后续动作
         => 继续执行后续路由   next()  next(true)
         => 阻止继续执行后续路由  next(false) 不调用next
    </pre>
    <router-link tag="button" :to="{ name: 'leave' }"
      >路由离开守卫的应用</router-link
    >

    <hr />
    <span>{{ msg }}:</span>
    <input type="text" v-model="msg" />
    <br />
    <router-link tag="button" :to="{ name: 'update', query: { msg: msg } }"
      >路由更新守卫的应用</router-link
    >

    <hr />
    <input type="button" value="模拟登录" @click="doLogin()" />
    <router-link tag="button" :to="{ name: 'enter' }"
      >路由进入守卫应用</router-link
    >
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    doLogin() {
      // ajax 请求
      // 模拟登录成功
      localStorage.setItem("token", Math.random());
    },
  },
};
</script>

<style lang="scss" scoped>
pre {
  text-align: center;
}
</style>
